<!DOCTYPE html>
<html lang="en">
<body>
<div style="width: 80%; margin: auto;text-align: center">

    <label>
        <input type="radio" name="radio" value="A"/>
        <span style="font-size: 50px;"><p style="margin-left: -1.45em;">A</p></span>
<!--        <p style="margin-right: 20px;font-size: 50px"></p>-->
    </label>
    <label>
        <input type="radio" name="radio" value="B" />
        <span style="font-size: 50px;"><p style="margin-left: -1.45em;">B</p></span>
    </label>
    <label>
        <input type="radio" name="radio"  value="C"/>
        <span style="font-size: 50px;"><p style="margin-left: -1.45em;">C</p></span>
    </label>
    <label>
        <input type="radio" name="radio" value="D"/>
        <span style="font-size: 50px;"><p style="margin-left: -1.45em;">D</p></span>
    </label>
</div>
<div class="centered">

<!--    <div id="submit" class="button">提交</div>-->
</div>

</body>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计系统</title>
    <!-- 引入jQuery库 -->
    <script src="/jquery-3.7.0.min.js"></script>
    <link rel="stylesheet" href="/style.css">
    <script>
        // 使用jQuery
        $(document).ready(function(){
            $("input[name='radio']").click(function() {
                // 获取选中的选项的值
                var selectedValue = $("input[name='radio']:checked").val();
                if (selectedValue === undefined) {
                    alert("请选择一个选项");
                    return;
                }
                console.log(selectedValue);
                // 向后端发起ajax请求
                $.ajax({
                    url: "/statistic/do/" + selectedValue,
                    type: "POST",
                    data: {
                    },
                    success: function(response) {
                        // 处理后端返回的数据
                        if (response.code === 1) {
                            alert("提交成功")
                            return
                        } else {
                            alert("您已经在" + response.data.localDateTime +"提交过选项 " + response.data.choose + "，请勿重复提交")
                            return
                        }
                    },
                    error: function(xhr, status, error) {
                        // 处理错误
                        alert("出错了，请重试提交")
                        console.log(error);
                    }
                });
            });
        });
    </script>

    <style>
        /* 水平居中 */
        .centered {
            margin: auto;
            display: inline-flex;
            width: 50%;
        }

    </style>

</head>
</html>